<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>同城帮首页</title>
	<link rel="stylesheet" type="text/css" href="css/index.css">
</head>

<body>
    <!-- 顶部 -->
	<header>
		<div class="toubu">
			<p class="leftHeader">
				<span>北京</span>
				<a href="javascript:void(0)" id="qiehuan">[切换城市]</a>|
				<a href="javascript:void(0)">同城帮项目</a>
			</p>
			<ul>
				<li><a href="#">登录</a></li>|
				<li><a href="#">注册</a></li>|
				<li><a href="#">我的订单</a></li>|
				<li><a href="#">在线客服</a>（9:00-21:00）</li>|
				<li><select><option value="">客户服务</option><option value="">帮助中心</option><option value="">维修付款</option></select></li>|
				<li><a href="#">论坛</a></li>|
				<li><a href="#" class="a1">投诉建议</a></li>
			</ul>
			<div class="city">
				<p class="lie">城市列表 <button class="close">关闭 ╳</button></p>
				<div class="content">
					<div class="remen">
						<p class="pin">热门</p>
						<p class="yin2"></p>
					</div>
					<div class="pinyin">
						<p class="pin">拼音</p>
						<div>
							<p class="yin1"></p>
                            <p class="yin2"></p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</header>

	<!-- 导航栏 -->
	<nav>
		<div>
			<h1><img src="img/logo.png"></h1>
			<ul>
				<li><a href="#">二手良品</a></li>
				<li><a href="#">手机回收</a></li>
				<li><a href="#">手机维修</a></li><!--html/sjwx.html-->
				<li><a href="#">电脑维修</a></li><!--html/dnwx.html-->
				<li><a href="#">以旧换新</a></li> <!--html/newOld.html-->
				<li><a href="html/rent.html">手机租用</a></li>
				<img src="img/a6.gif">
			</ul>
		</div>
	</nav>
	<!-- 轮播图 -->
	<div id="div1">
		<div id="wrap">
			<div id="lub">
				<div id="middle">
					<img src="img/a1.jpg">
					<img src="img/a2.jpg">
					<img src="img/a3.jpg">
					<img src="img/a4.jpg">
					<img src="img/a5.jpg">
					<img src="img/a1.jpg">
				</div>
				<ul id="btn">
					<li class="bianse"></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
			<!-- 轮播图左侧tab -->
			<div id="leftLan">
				<ul id="btn2">
					<li>修手机/Pad</li>
					<li>修电脑</li>
					<li>买手机/电脑</li>
					<li>买二手机</li>
				</ul>
				<!-- 划过出现的div -->
				<div id="huaGuo">
				    <!-- 划过时第一个出现的div -->
					<div class="hua1">
						<p>
						    <span class="sp1">屏幕 ></span>
						    <span class="sp2">|<a href="#">屏碎,但正常显示</a>|<a href="#">屏幕不显示或花屏</a>|<a href="#">屏幕触摸失灵</a>|<a href="#">Pad更换屏幕</a></span>
						</p>
						<p>
							<span class="sp1">电池/充电/开机 ></span>
							<span class="sp2">|<a href="#">电池问题</a>|<a href="#">不开机</a>|<a href="#">充电(连接)问题</a></span>
						</p>
						<p>
							<span class="sp1">按键 ></span>
							<span class="sp2">|<a href="#">开关机键失灵</a>|<a href="#">Home键失灵</a>|<a href="#">音量键失灵</a></span>
						</p>
						<p>
							<span class="sp1">声音/震动 ></span>
							<span class="sp2">|<a href="#">听筒问题</a>|<a href="#">麦克风问题</a>|<a href="#">外放扬声器问题</a>|<a href="#">耳机插口故障</a>|<a href="#">震动功能失效</a></span>
						</p>
						<p>
							<span class="sp1">拍照/录像 ></span>
							<span class="sp2">|<a href="#">后摄像头无法拍照</a>|<a href="#">前摄像头拍照故障</a></span>
						</p>
						<p>
							<span class="sp1">外壳/边框 ></span>
							<span class="sp2">|<a href="#">中框变形</a>|<a href="#">手机换彩壳</a></span>
						</p>
						<p>
							<span class="sp1">进水入液/主板故障 ></span>
							<span class="sp2">|<a href="#">进水入液</a>|<a href="#">手机主板故障</a></span>
						</p>
						<p>
							<span class="sp1">其他故障 ></span>
							<span class="sp2">|<a href="#">软件升级/刷机</a>|<a href="#">WiFi功能故障</a></span>
						</p>
						<p>
							<span class="sp1">个性化服务 ></span>
							<span class="sp2">|<a href="#">点亮iPhone logo</a>|<a href="#">蓝光护眼钢化膜</a>|<a href="#">极透高清钢化膜</a>|<a href="#">爱机深度清洁</a>|<a href="#">手机换彩壳</a></span>
						</p>
					</div>
					<!-- 划过时第二个出现的div -->
					<div class="hua2">
						<p>
						    <span class="sp3">热门问题 :</span>
						    <span class="sp4">
						        <a href="#">系统重装</a>
						        <a href="#">电脑清灰</a>
						        <a href="#">VR移机/安装</a>
						        <a href="#">数据恢复</a>
						        <a href="#">系统故障修复</a>
						        <a href="#">驱动安装</a>
						    </span>
						</p>
						<p>
							<span class="sp3">其他问题 :</span>
							<span class="sp4">
								<a href="#">游戏加速</a>
								<a href="#">开机加速</a>
								<a href="#">网速优化</a>
								<a href="#">蓝屏死机</a>
								<a href="#">电脑没声音</a>
								<a href="#">路由器调试</a>
								<a href="#">无法上网</a>
								<a href="#">家庭局域网</a>
								<a href="#">更换风扇</a>
								<a href="#">病毒查杀</a>
							</span>
						</p>
					</div>
					<!-- 划过时第三个出现的div -->
					<div class="hua3">
						<a href="#">苹果</a>
						<a href="#">三星</a>
						<a href="#">小米</a>
						<a href="#">华为</a>
						<a href="#">VIVO</a>
						<a href="#">OPPO</a>
						<a href="#">HTC</a>
						<a href="#">魅族</a>
						<a href="#">索尼</a>
						<a href="#">联想</a>
						<a href="#">中兴</a>
						<a href="#">乐视</a>
						<a href="#">LG</a>
						<a href="#">黑莓</a>
						<a href="#">美图秀秀</a>
						<a href="#">360手机</a>
						<a href="#">锤子</a>
						<a href="#">酷派</a>
						<a href="#">朵唯</a>
						<a href="#">诺基亚</a>
						<a href="#">TCL</a>
						<a href="#">PPTV</a>
						<a href="#">小辣椒</a>
						<a href="#">金立</a>
						<a href="#">摩托罗拉</a>
						<a href="#">微软</a>
						<a href="#">一加</a>
						<a href="#">先锋</a>
					</div>
					<!-- 划过时第四个出现的div -->
					<div class="hua4">
						<a href="#">三星</a>
						<a href="#">苹果</a>
						<a href="#">小米</a>
						<a href="#">华为</a>
						<a href="#">HTC</a>
						<a href="#">诺基亚</a>
						<a href="#">酷派</a>
						<a href="#">索尼</a>
						<a href="#">魅族</a>
						<a href="#">中兴</a>
						<a href="#">联想</a>
						<a href="#">金立</a>
						<a href="#">努比亚</a>
						<a href="#">摩托罗拉</a>
						<a href="#">一加</a>
						<a href="#">LG</a>
						<a href="#">vivo</a>
						<a href="#">oppo</a>
						<a href="#">乐视</a>
						<a href="#">360手机</a>
						<a href="#">美图秀秀</a>
						<a href="#">微软</a>
						<a href="#">戴尔</a>
						<a href="#">同城帮定制</a>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- 中间商品列表 -->
	<div id="div2">
		<!-- 设置轮播底下商品列表 -->
		<div class="xiao1">
			<dl>
				<dt>手机换屏</dt>
				<dd>上门服务 180天质保</dd>
				<p><img src="img/a8.jpg"></p>
			</dl>
			<dl>
				<dt>iPhone更换全新手机</dt>
				<dd>仅需89元起</dd>
				<p><img src="img/a9.jpg"></p>
			</dl>
			<dl>
				<dt>多旧换一新</dt>
				<dd>0元拿360手机</dd>
				<p id="p1"><img src="img/a10.jpg"></p>
			</dl>
			<dl>
				<dt>手机升级</dt>
				<dd>0元起拿iPhone</dd>
				<p id="p2"><img src="img/a11.jpg"></p>
				<img src="img/a6.gif" class="hot" />
			</dl>
		</div>
		<!-- 热门手机回收 -->
		<div class="xiao2">
			<h2>热门手机回收 <a href="#">查看更多<img src="img/a24.png"></a></h2>
			<div>
				<dl>
					<dt><img src="img/a12.jpg"></dt>
				</dl>
				<dl>
					<dt><img src="img/a13.jpg"></dt>
					<dd>苹果iPhone 6</dd>
				</dl>
				<dl>
					<dt><img src="img/a14.jpg"></dt>
					<dd>苹果iPhone 5s</dd>
				</dl>
				<dl>
					<dt><img src="img/a15.jpg"></dt>
					<dd>小米 M4</dd>
				</dl>
				<dl>
					<dt><img src="img/a16.jpg"></dt>
					<dd>华为 Mate 7</dd>
				</dl>
				<dl>
					<dt><img src="img/a17.jpg"></dt>
					<dd>魅族 MX5</dd>
				</dl>
			</div>
		</div>
		<!-- 二手良品精选 -->
		<div class="xiao2">
			<h2>二手良品精选 <a href="#">查看更多<img src="img/a24.png"></a></h2>
			<div>
				<dl>
					<dt><img src="img/a18.jpg"></dt>
				</dl>
				<dl>
					<dt><img src="img/a19.jpg"></dt>
					<dd>苹果 iPhone 6 Plus</dd>
					<p>￥ 2699</p>
				</dl>
				<dl>
					<dt><img src="img/a20.jpg"></dt>
					<dd>苹果 iPhone 6S</dd>
					<p>￥ 3350</p>
				</dl>
				<dl>
					<dt><img src="img/a21.jpg"></dt>
					<dd>苹果 iPhone 6 Plus</dd>
					<p>￥ 2599</p>
				</dl>
				<dl>
					<dt><img src="img/a22.jpg"></dt>
					<dd>苹果 iPhone 6</dd>
					<p>￥ 2399</p>
				</dl>
				<dl>
					<dt><img src="img/a23.jpg"></dt>
					<dd>苹果 iPhone 6S</dd>
					<p>￥ 3899</p>
				</dl>
			</div>
		</div>
	</div>

    <!-- 地图模式 -->
	<div class="ditu">
		<div class="map">
			<h3>地图模式<span>╳</span></h3>
			<div id="container"></div>
			<!--<ul class="btn5">
				<li class="orange2">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
				<p>下一页>></p>
			</ul>-->
		</div>
	</div>
    
    <!-- 到店维修 -->
    <h2 class="weiXiu">到店维修</h2>
    <div id="div3">
    	<div class="daDiv">
    	    <!-- 搜索区域 -->
    		<div class="sou">
    			<select class="aa"><option>选择省市</option></select>
    			<select class="bb"><option>选择区县</option></select>
    			<input type="text" name="" placeholder="输入您的位置查找附近的商家" class="txt1"><button>搜索</button>
    			<p class="pp1">可以搜索您所在的小区、写字楼或标志性建筑</p>
    			<ul class="ull"></ul>
    		</div>
    		<!-- 左侧数据栏头部 -->
    		<div class="zuo">
    			<ul class="btn3">
    				<li class="teshu" style="border-left: none;">默认排序</li>
    				<li>按成交量</li>
    				<li>按人气</li>
    				<p class="pp2"><input type="checkbox" name="" id="xxpf"><label for="xxpf">先行赔付</label></p>
    				<!--<p class="pp3"><img src="img/a25.png"> <span>地图模式</span></p>-->
    			</ul>
    			<!-- 数据 -->
    			<div class="shuJu">
    				<!-- <div class="tiao">
    					<p><img src="img/a26.jpg"></p>
    					<ul class="ul1">
    						<li><a href="#">顺通电脑维修</a> 店铺等级: 8</li>
    						<li>主营：电脑维修，电脑周边配件，系统维护，网络安装，打印机加主营：电脑维修，电脑周边配件，系统维护，网络安装，打印机加</li>
    						<li>地址：北京通州区果园环岛葛布店北里10号楼底商地址：北京通州区果园环岛葛布店北里10号楼底商</li>
    					</ul>
    					<ul class="ul2">
    						<li><img src="img/a27.png"> 先行赔付</li>
    						<li><img src="img/a28.png"> 同城帮认证</li>
    						<li>人气：98978次浏览</li>
    					</ul>
    					<button>进入店铺</button>
    				</div> -->
    			</div>
    			<!-- 切换数据 -->
    			<!--<ul class="btn4">
    				<li class="orange">1</li>
    				<li>2</li>
    				<li>3</li>
    				<li>4</li>
    				<li>5</li>
    				<li>6</li>
    				<p>下一页>></p>
    			</ul>-->
    		</div>
    		<!-- 右侧数据区域 -->
            <div class="you">
            	<h3>商家好评榜</h3>
            	<!-- <div class="tiao2">
            		<div class="xx1">1</div>
            		<div class="xx2">
            			<img src="img/a26.jpg">
            		</div>
            		<div class="xx3">
            			<a href="#">戴尔电脑维修站点</a>
            			<p>11222条评论</p>
            		</div>
            	</div> -->
            </div>
    	</div>
    </div>

    <!-- 固定定位 -->
    <!--<div class="gddw">
    	<p></p>
    </div>-->

    <!-- 回到顶部 -->
    <div class="hddb"></div>

    <!-- 页面底部 -->
    <footer>
    	<div class="foot1">
    	    <div>
    	    	<p></p>
    	    	<ul>
	    			<h3>购物指南</h3>
	    			<li><a href="#">购物流程</a></li>
	    			<li><a href="#">用户注册</a></li>
	    			<li><a href="#">帮助文档</a></li>
	    		</ul>
    	    </div>
    		<div>
    			<p></p>
    			<ul>
	    			<h3>支付方式</h3>
	    			<li><a href="#">在线支付</a></li>
	    			<li><a href="#">当面支付</a></li>
	    		</ul>
    		</div>
    		<div>
    			<p></p>
    			<ul>
	    			<h3>售后服务</h3>
	    			<li><a href="#">投诉建议</a></li>
	    		</ul>
    		</div>
    		<div>
    		    <p></p>
    			<ul>
	    			<h3>特色保障</h3>
	    			<li><a href="#">360担保支付</a></li>
	    		</ul>
    		</div>
    		<div>
    			<p></p>
	    		<ul>
	    			<h3>商家合作</h3>
	    			<li><a href="#" class="aa1">加盟同城帮</a></li>
	    			<li><a href="#">新闻采访/跨界合作</a></li>
	    		</ul>
    		</div>
    	</div>
    	<!-- 底部2 -->
    	<div class="foot2">
    		<p>客服电话：4000-399-360 / 010-53767360 <a href="#">投诉建议</a> <a href="#">网站地图</a></p>
    		<p>Copyright © 2005-2017  360.CN  All Rights Reserved  360安全中心</p>
    		<p><a href="#" style="margin:0 10px 0 0;">京ICP备08010314号-19</a>     京公网安备110000000006号</p>
    	</div>
    </footer>
</body>
    <script type="text/javascript" src="js/lib/jquery-3.0.0.min.js"></script>
    <script src="http://webapi.amap.com/maps?v=1.3&8288b3e5a41cacaefd9ef86250fbbb1a&callback=init"></script>
    <script type="text/javascript" src="js/app/index1.js"></script>
    <script type="text/javascript" src="js/app/index2.js"></script>
</html>